<template>
	<view class="container">
		<!--  -->
		<view class="fix-title">
			<!-- 说明 -->
			<view>
				<text>好友下单每1000元，平台奖励您5元</text>
				<image @click="handleOpenModal" src="/static/icon2/03.png" mode="aspectFill" ></image>
			</view>
			<!-- 我的好友信息类目 -->
			<view>
				<text>姓名</text>
				<text>注册时间</text>
			</view>
		</view>
		
		<!-- 我的好友列表 -->
		<view class="list">
			<view v-for="(item, index) in friendsList" :key="item.userId">
				<view>
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589875144659&di=ec1541cd0b8eff17cc7f31da5c618e91&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg" mode="aspectFill"></image>
					<text>{{ item.userName }}</text>
				</view>
				<view>{{ item.createTime.slice(0, 11) }}</view>
			</view>
		</view>
		
		<!-- 分享按钮 -->
		<view class="bottom">
			<view @click="handleShare('WXSceneSession')">
				<image src="/static/icon1/05.png" mode="aspectFill"></image>
				<text>微信</text>
			</view>
			<view @click="handleShare('WXSenceTimeline')">
				<image src="/static/icon1/06.png" mode="aspectFill"></image>
				<text>朋友圈</text>
			</view>
			<view @click="handleOpenPost">二维码分享</view>
		</view>
		
		<!-- 分享海报 -->
		<view class="modal" :class="isShowPost ? 'show' : ''">
			<!-- 海报图 -->
			<!-- <canvas canvas-id="qrcode" style="width: 150px; height: 150px; position: fixed;top: 10px;" /> -->
			<canvas canvas-id="invitation-post" :style="{ width: '305px', height: '403px', position: 'fixed', top: '-9999px', left: '35px'}"></canvas>		
			
			<view class="my-post" @longpress="handleSaveAlbum">
				<image class="bg" :src="postUrl" mode="aspectFill"></image>
			</view>
			
			<image @click="handleClosePost" class="close" src="/static/icon1/07.png"></image>
		</view>
		<modal :isShowModal="isShowModal" :modalStytle = "modalStytle" @handleLeft="handleLeft" @handleRight="handleRight" :titleContect="titleContect" :middleContext="middleContext" :leftContext="leftContext" :rightContext="rightContext"></modal>
	</view>
</template>

<script>
	import modal from '@/components/modal/modal.vue'
	import { baseURL } from '@/config'
	export default {
		data() {
			return {
				modalStytle: 3,//0-left-text,1-two-line,2-hasInput, 3-middle-context
				isShowModal: false,//是否出现弹框
				imgPath:'',//图片路径
				friendsNum: 3,//好友数量
				friendsList: [],//我的好友即下级列表
				isShowPost: false, //是否显示海报
				postUrl: '',//海报URL 
				requestObj: {
					pageNum: 0,
					pageSize: 10000,
				},
			}
		},
		methods: {
			// 打开弹框
			handleOpenModal() {
				this.isShowModal = true
			},
			
			//弹框按键
			handleLeft () {
				this.isShowModal = false
			},
			handleRight() {
				this.isShowModal = false
			},
			
			// 保存至相册
			handleSaveAlbum () {
				uni.saveImageToPhotosAlbum({
					filePath: this.postUrl, 
					success: (res) => { 
						console.log('111111111122222')  
						uni.showToast({ title: '海报已存至相册' })
					}
				})
			},
			// 获取我的下级 好友
			async my_sub () {
				let res = await this.$fetch(this.$api.my_sub, this.requestObj , 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				this.friendsList = res.rows
				this.friendsNum = res.total
				console.log('res--', res)
				
			},
			
			//判断有几个好友
			changTitle() {
				if(this.friendsNum ) {
					uni.setNavigationBarTitle({
					    title: '邀请好友（' + this.friendsNum + '）'
					})
				}
			},
			
			//分享到微信
			handleShare(scene) {
				console.log(scene)
				// App分享为微信小程序type=5（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）
				// uni.share({
				//     provider: 'weixin',
				//     scene: scene,
				//     type: 5,
				//     imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png',
				//     title: '欢迎体验uniapp',
				//     miniProgram: {
				//         id: 'gh_abcdefg',
				//         path: 'pages/index/index',
				//         type: 0,
				//         webUrl: 'http://uniapp.dcloud.io'
				//     },
				//     success: ret => {
				//         console.log(JSON.stringify(ret));
				//     }
				// })
			},
			
			// 获取二维码
			async get_user_qrcode () {
				let res = await this.$fetch(this.$api.get_user_qrcode, {} , 'GET')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				// console.log('res.data', res.data)
				this.obj = res.data
				console.log('二维码', baseURL + res.data.path)
				
				this.$nextTick( ()=> {
					this.createdPost(this.imgPath + res.data.avatar,
					res.data.userName, baseURL + res.data.path)
				})
			},
			
			// 创建画布
			createdPost (avatar, userName, qrcode) {
				const ctx = uni.createCanvasContext('invitation-post') 
				//背景图片
				ctx.drawImage('/static/icon1/08.png', 0, 0, 305, 403)
				
				//用户名
				ctx.setFillStyle('#402110')
				ctx.font="bold 14px PingFangSC-Medium";
				ctx.fillText(userName, 160/2, 40/2+20) 
				const metrics = ctx.measureText(userName)
				
				//说明
				ctx.setFillStyle('rgba(64,33,16,0.50)')
				ctx.font="12px PingFangSC-Regular";
				ctx.fillText('扫码加入“找零工”，开启“滴滴招人”', 163/2, 90/2 + 17) 	
				//二维码
				ctx.drawImage(qrcode, 58/2, 210/2, 496/2, 496/2)
				//提示
				ctx.setFillStyle('#402110')
				ctx.font="14px PingFangSC-Regular";
				ctx.fillText('长按二维码保存至相册', 166/2, 726/2 + 20)
				//任务头像
				ctx.arc(85/2, 85/2, 22.5, 0, 2 * Math.PI)// 画圆
				ctx.clip()
				ctx.drawImage(avatar, 40/2, 40/2, 45, 45) 
				
				ctx.draw(true, () => {
					uni.canvasToTempFilePath({
						canvasId: 'invitation-post',
						success: (res) => { 
							uni.hideLoading() 
							this.postUrl = res.tempFilePath
							console.log('画图')
						}
					})
				})
			}, 
		
			//打开海报
			handleOpenPost() {
				this.isShowPost = true
			},
		
			//关闭海报
			handleClosePost () {
				console.log('关闭海报')
				this.isShowPost = false
			}
		},
		onLoad() {
			this.imgPath = uni.getStorageSync('imgPath')
			this.my_sub ()
			this.changTitle()
		},
		created () {
			this.get_user_qrcode()
		},
	}
</script>

<style lang="less" scoped>
page {
	background-color: #F2F2F2;
}
.container {
	overflow: hidden;
	
	& > .fix-title {
		z-index: 1;
		width: 100vw;
		position: fixed;
		
		& > view:first-child {
			background-color: #f2f2f2;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 0;
			& > image {
				margin-left: 10rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
		& > view:nth-child(2) {
			height: 80rpx;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid #F2F2F2;
			text {
				flex: 1;//平均分
				color: #888888;
				text-align: center;
			}
		}
	}
	& > .list {
		background-color: #FFFFFF;
		margin: 170rpx 0 130rpx;
		& > view {
			display: flex;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 30rpx;
				width: 690rpx;
				height: 2rpx;
				background: #F2F2F2;
			}
			& > view {
				width: 375rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				
				image {
					margin: 0 30rpx 0 60rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				text {
					color: #333540;
				}
				
			}
			& > view:last-child {
				justify-content: center;
				text-align: center;
				color: #222222;
			}
		}
	}
	& > .bottom {
		z-index: 1;
		position: fixed;
		bottom: 0;
		width: 100vw;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		& > view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			& > image {
				width: 42rpx;
				height: 42rpx;
			}
			& > text {
				font-size: 12px;
			}
		}
		& > view:first-child {
			margin-left: 46rpx;
		}
		& > view:nth-child(2) {
			margin: 0 56rpx 0 76rpx;
		}
		& > view:last-child {
			flex: 1;
			height: 100rpx;
			background-color: #FCC928;
			&:active {
				opacity: 0.7;
			}
		}
	}
	
	& > .modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.4);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
		
		&.show {
			opacity: 1;
			transition-duration: 0.3s;
			-ms-transform: scale(1);
			transform: scale(1);
			overflow-x: hidden;
			overflow-y: auto;
			pointer-events: auto;
		}
		.my-post {
			// border: 1px solid  #4CD964;
			// z-index: 10;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 610rpx;
			height: 806rpx;
				
			.bg {
				width: 610rpx;
				height: 806rpx;
			}
		}
		
		.close {
			position: fixed;
			width: 70rpx;
			height: 70rpx;
			left: 50%;
			margin-left: -35rpx;
			bottom: 90rpx;
		}
	}
}


</style>
